<template>
  <view>
    <view v-if="isload">
      <view class="dialog-mask" @tap="gooddialogChange"></view>
      <view class="close" @tap="gooddialogChange">
        <image src="/static/img/close.png" class="image" />
      </view>
      <view class="dialog">
        <view class="container">
          <scroll-view
            @scroll="handleScroll"
            :scroll-y="true"
            style="height: 100%; overflow: scroll"
            :scroll-top="scrollTop"
            @scrolltolower="reachBottom"
          >
            <block v-if="isload">
              <view class="content-container">
                <view class="nav_left">
                  <view
                    :class="
                      'nav_left_items ' + (curIndex == -1 ? 'active' : '')
                    "
                    :style="{ color: curIndex == -1 ? t('color2') : '#333' }"
                    @tap="switchRightTab"
                    data-index="-1"
                    data-id="0"
                  >
                    <view
                      class="before"
                      :style="{ background: t('color2') }"
                    ></view
                    >全部
                  </view>
                  <block v-for="(item, index) in clist" :key="index">
                    <view
                      :class="
                        'nav_left_items ' + (curIndex == index ? 'active' : '')
                      "
                      :style="{
                        color: curIndex == index ? t('color2') : '#333',
                      }"
                      @tap="switchRightTab"
                      :data-index="index"
                      :data-id="item.id"
                    >
                      <view
                        class="before"
                        :style="{ background: t('color2') }"
                      ></view
                      >{{ item.name }}
                    </view>
                  </block>
                </view>
                <view class="nav_right">
                  <view class="nav_right-content">
                    <!-- <view class="nav-img" v-if="categoryimg">
                      <image :src="categoryimg"></image>
                    </view> -->
                    <view class="nav-pai">
                      <view
                        class="nav-paili"
                        :style="
                          !field || field == 'sort'
                            ? 'color:' + t('color2')
                            : ''
                        "
                        @tap="changeOrder"
                        data-field="sort"
                        data-order="desc"
                        >综合</view
                      >

                      <view
                        class="nav-paili"
                        @tap="changeOrder"
                        data-field="sell_price"
                        :data-order="order == 'asc' ? 'desc' : 'asc'"
                      >
                        <text
                          :style="
                            field == 'sell_price' ? 'color:' + t('color2') : ''
                          "
                          >价格</text
                        >
                        <text
                          class="iconfont iconshangla"
                          :style="
                            field == 'sell_price' && order == 'asc'
                              ? 'color:' + t('color2')
                              : ''
                          "
                        ></text>
                        <text
                          class="iconfont icondaoxu"
                          :style="
                            field == 'sell_price' && order == 'desc'
                              ? 'color:' + t('color2')
                              : ''
                          "
                        ></text>
                      </view>
                      <view
                        class="nav-paili"
                        :style="field == 'sales' ? 'color:' + t('color2') : ''"
                        @tap="changeOrder"
                        data-field="sales"
                        data-order="desc"
                        >销量</view
                      >
                    </view>
                    <view
                      class="classify-ul"
                      v-if="curIndex > -1 && clist[curIndex].child.length > 0"
                    >
                      <view
                        class="flex"
                        style="
                          width: 100%;
                          overflow-y: hidden;
                          overflow-x: scroll;
                        "
                      >
                        <view
                          class="classify-li"
                          :style="
                            curIndex2 == -1
                              ? 'color:' +
                                t('color2') +
                                ';background:rgba(' +
                                t('color2rgb') +
                                ',0.2)'
                              : ''
                          "
                          @tap="changeCTab"
                          :data-id="clist[curIndex].id"
                          data-index="-1"
                          >全部</view
                        >
                        <block
                          v-for="(item, idx2) in clist[curIndex].child"
                          :key="idx2"
                        >
                          <view
                            class="classify-li"
                            :style="
                              curIndex2 == idx2
                                ? 'color:' +
                                  t('color2') +
                                  ';background:rgba(' +
                                  t('color2rgb') +
                                  ',0.2)'
                                : ''
                            "
                            @tap="changeCTab"
                            :data-id="item.id"
                            :data-index="idx2"
                            >{{ item.name }}</view
                          >
                        </block>
                      </view>
                    </view>
                    <scroll-view
                      class="classify-box"
                      scroll-y="true"
                      @scrolltolower="scrolltolower"
                    >
                      <view class="product-itemlist">
                        <view
                          class="item"
                          v-for="(item, index) in datalist"
                          :key="item.id"
                          :class="item.stock <= 0 ? 'soldout' : ''"
                          @click="goto"
                          :data-url="'/pages/shop/product?id=' + item.id"
                        >
                          <view class="product-pic">
                            <image
                              class="image"
                              :src="item.pic"
                              mode="widthFix"
                            />
                            <view class="overlay">
                              <view class="text">售罄</view>
                            </view>
                          </view>
                          <view class="product-info">
                            <view class="p1"
                              ><text>{{ item.name }}</text></view
                            >
                            <view
                              v-if="
                                item.price_show_type == '0' ||
                                !item.price_show_type
                              "
                            >
                              <view
                                class="p2"
                                v-if="
                                  item.price_type != 1 || item.sell_price > 0
                                "
                              >
                                <text
                                  class="t2"
                                  v-if="
                                    item.market_price * 1 > item.sell_price * 1
                                  "
                                  >原价￥{{ item.market_price }}</text
                                >
                              </view>
                              <view
                                class="p2"
                                v-if="
                                  item.price_type != 1 || item.sell_price > 0
                                "
                              >
                                <text
                                  class="t1"
                                  :style="{ color: t('color2') }"
                                >
                                  <text
                                    style="font-size: 20rpx; padding-right: 1px"
                                    >￥</text
                                  >{{ item.sell_price }}
                                </text>
                              </view>
                            </view>
                            <view
                              v-if="
                                item.price_show_type == '1' ||
                                item.price_show_type == '2'
                              "
                            >
                              <view v-if="item.is_vip == '0'">
                                <view
                                  class="p2"
                                  v-if="
                                    item.price_type != 1 || item.sell_price > 0
                                  "
                                >
                                  <text
                                    class="t1"
                                    :style="{ color: t('color2') }"
                                    ><text
                                      style="
                                        padding-right: 1px;
                                        font-size: 20rpx;
                                      "
                                      >￥</text
                                    >
                                    <text style="font-size: 32rpx">{{
                                      item.sell_price
                                    }}</text>
                                  </text>
                                  <text
                                    class="t2"
                                    v-if="
                                      item.market_price * 1 >
                                      item.sell_price * 1
                                    "
                                    >￥{{ item.market_price }}</text
                                  >
                                </view>

                                <view
                                  class="flex"
                                  v-if="
                                    item.price_show_type == '2' &&
                                    item.lvprice == 1
                                  "
                                >
                                  <view
                                    class="member flex"
                                    :style="'border-color:' + t('color2')"
                                  >
                                    <view
                                      :style="{ background: t('color2') }"
                                      class="member_lable flex-y-center"
                                      >{{ item.level_name_show }}
                                    </view>
                                    <view
                                      :style="'color:' + t('color2')"
                                      class="member_value flex-y-center"
                                    >
                                      ￥<text>{{
                                        item.sell_price_origin
                                      }}</text>
                                    </view>
                                  </view>
                                </view>
                              </view>
                              <view v-if="item.is_vip == '1'">
                                <view class="flex" v-if="item.lvprice == 1">
                                  <view
                                    class="member flex"
                                    :style="'border-color:' + t('color2')"
                                  >
                                    <view
                                      :style="{ background: t('color2') }"
                                      class="member_lable flex-y-center"
                                      >{{ item.level_name_show }}
                                    </view>
                                    <view
                                      :style="'color:' + t('color2')"
                                      class="member_value flex-y-center"
                                    >
                                      ￥<text style="font-size: 32rpx">{{
                                        item.sell_price
                                      }}</text>
                                    </view>
                                  </view>
                                </view>
                                <view
                                  class="p2"
                                  v-if="
                                    item.price_type != 1 || item.sell_price > 0
                                  "
                                >
                                  <text
                                    class="t1"
                                    :style="{ color: t('color2') }"
                                    ><text
                                      style="
                                        font-size: 20rpx;
                                        padding-right: 1px;
                                      "
                                      >￥</text
                                    >
                                    <text
                                      :style="
                                        item.lvprice == '1'
                                          ? 'font-size:26rpx;'
                                          : 'font-size:32rpx;'
                                      "
                                      >{{ item.sell_price_origin }}</text
                                    >
                                  </text>
                                  <text
                                    class="t2"
                                    v-if="
                                      item.market_price * 1 >
                                      item.sell_price * 1
                                    "
                                    >￥{{ item.market_price }}</text
                                  >
                                </view>
                              </view>
                            </view>
                            <!-- <view class="p3">
                              <view class="p3-1" v-if="item.sales > 0 && 0"
                                ><text>已售{{ item.sales }}件</text></view
                              >
                            </view> -->
                            <view
                              class="p4"
                              :style="{ borderColor: t('color1') }"
                              @tap.stop="chooseGood(item)"
                            >
                              选择商品
                            </view>
                          </view>
                        </view>
                      </view>
                      <nomore text="没有更多商品了" v-if="nomore"></nomore>
                      <nodata text="暂无相关商品" v-if="nodata"></nodata>
                      <view style="width: 100%; height: 100rpx"></view>
                    </scroll-view>
                  </view>
                </view>
              </view>
            </block>
          </scroll-view>
        </view>
      </view>
    </view>
    <loading v-if="loading"></loading>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var app = getApp();
var interval = null;
export default {
  data() {
    return {
      isLoding: true,
      isload: false,
      loading: false,
      menuindex: -1,
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      chooseO: null,
      scrollTop: 0,

      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,
      pagenum: 1,
      nomore: false,
      nodata: false,
      order: "",
      field: "",
      clist: [],
      curIndex: -1,
      curIndex2: -1,
      datalist: [],
      nodata: false,
      curCid: 0,
      proid: 0,
      buydialogShow: false,
      bid: "",

      showLinkStatus: false,
      lx_name: "",
      lx_bid: "",
      lx_tel: "",

      memberinfo: "",
      noreadstr: "",
      categoryimg: "",
    };
  },
  props: {},
  mounted: function () {
    var that = this;
    that.getdata();
  },
  onLoad: function (opt) {
    this.opt = app.getopts(opt);
    this.bid = this.opt.bid ? this.opt.bid : "";
    this.getdata();
  },
  onReachBottom: function () {
    // if (!this.nomore) {
    //   this.pagenum = this.pagenum + 1;
    //   this.getdatalist(true);
    // }
  },
  onNavigationBarSearchInputConfirmed: function (e) {
    this.searchConfirm({
      detail: {
        value: e.text,
      },
    });
  },
  methods: {
    gooddialogChange: function () {
      this.$emit("gooddialogChange");
    },

    chooseGood: function (e) {
      this.$emit("chooseGood", e);
    },

    handleScroll(e) {
      // 滚动事件参数
      // const { scrollHeight, scrollTop, clientHeight } = e.detail;
      // // 判断是否滚动到底部（距离底部 < 50px 时触发）
      // if (scrollHeight - (scrollTop + clientHeight) < 50) {
      //     if (!this.isReachingBottom) {
      //         this.isReachingBottom = true;
      //         console.log("已滚动到底部");
      //         this.loadMoreData(); // 加载更多数据
      //     }
      // } else {
      //     this.isReachingBottom = false;
      // }
    },

    getdata: function () {
      var that = this;
      var nowcid = that.opt.cid;
      if (!nowcid) nowcid = "";
      that.pagenum = 1;
      that.datalist = [];
      that.loading = true;
      app.get(
        "Shop/classify",
        {
          needinit: 1,
          cid: nowcid,
          bid: that.bid,
        },
        function (res) {
          that.loading = false;
          var clist = res.data;
          that.clist = clist;
          if (nowcid) {
            for (var i = 0; i < clist.length; i++) {
              if (clist[i]["id"] == nowcid) {
                that.curIndex = i;
                that.curCid = nowcid;
              }
              var downcdata = clist[i]["child"];
              var isget = 0;
              for (var j = 0; j < downcdata.length; j++) {
                if (downcdata[j]["id"] == nowcid) {
                  that.curIndex = i;
                  that.curIndex2 = j;
                  that.curCid = nowcid;
                  isget = 1;
                  break;
                }
              }
              if (isget) break;
            }
          }
          that.categoryimg = res._initdata.categoryimg;
          that.loaded();
          that.getdatalist();
        }
      );
    },

    getdatalist: function (loadmore) {
      if (!loadmore) {
        this.pagenum = 1;
        this.datalist = [];
      }

      var that = this;

      var pagenum = that.pagenum;

      var cid = that.curCid;
      var bid = that.opt.bid ? that.opt.bid : "";
      var order = that.order;

      var field = that.field;
      that.loading = true;
      that.nodata = false;
      that.nomore = false;
      var wherefield = {};
      wherefield.pagenum = pagenum;
      wherefield.field = field;
      wherefield.order = order;
      wherefield.bid = bid;
      if (bid > 0) {
        wherefield.cid2 = cid;
      } else {
        wherefield.cid = cid;
      }
      //如果设置过地域限制【定位模式下】
      var cachearea = app.getCache("user_current_area");
      var cachelongitude = app.getCache("user_current_longitude");
      var cachelatitude = app.getCache("user_current_latitude");
      if (cachearea) {
        wherefield.area = cachearea;
      }
      if (cachelongitude) {
        wherefield.latitude = cachelatitude;
        wherefield.longitude = cachelongitude;
      }

      app.post("Shop/getprolist", wherefield, function (res) {
        that.loading = false;

        uni.stopPullDownRefresh();

        var data = res.data;
        if (data.length == 0) {
          if (pagenum == 1) {
            that.nodata = true;
          } else {
            that.nomore = true;
          }
        }
        var datalist = that.datalist;
        var newdata = datalist.concat(data);
        that.datalist = newdata;

        that.memberinfo = res.memberinfo;
      });
    },

    scrolltolower: function () {
      if (!this.nomore) {
        this.pagenum = this.pagenum + 1;
        this.getdatalist(true);
      }
    },

    //改变子分类

    changeCTab: function (e) {
      var that = this;

      var id = e.currentTarget.dataset.id;
      var index = parseInt(e.currentTarget.dataset.index);

      this.curIndex2 = index;
      this.nodata = false;

      this.curCid = id;

      this.pagenum = 1;

      this.datalist = [];

      this.nomore = false;

      this.getdatalist();
    },

    //改变排序规则

    changeOrder: function (e) {
      var t = e.currentTarget.dataset;

      this.field = t.field;
      this.order = t.order;

      this.pagenum = 1;
      this.datalist = [];
      this.nomore = false;

      this.getdatalist();
    },

    //事件处理函数

    switchRightTab: function (e) {
      var that = this;

      var id = e.currentTarget.dataset.id;

      var index = parseInt(e.currentTarget.dataset.index);

      this.curIndex = index;
      this.curIndex2 = -1;
      this.nodata = false;
      this.curCid = id;
      this.pagenum = 1;
      this.datalist = [];
      this.nomore = false;

      this.getdatalist();
    },

    reachBottom() {
      this.loadMoreData();
    },

    loadMoreData() {
      // 加载更多数据的逻辑
      if (!this.nodata && !this.nomore) {
        this.pagenum = this.pagenum + 1;
        this.getdata(true);
      }
    },
  },
};
</script>

<style scoped>
page {
  position: relative;
  width: 100%;
  height: 100%;
}

.dialog-mask {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  bottom: 0px;
  z-index: 10;
}

.dialog {
  position: fixed;
  width: 100%;
  left: 0px;
  bottom: 0px;
  background: #f6f6f6;
  z-index: 11;
  border-radius: 20rpx 20rpx 0px 0px;
  overflow: hidden;
  height: 80%;
}

.close {
  position: absolute;
  top: 15%;
  right: 5%;
  z-index: 12;
  background-color: #f1f1f1;
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close .image {
  width: 30rpx;
  height: 30rpx;
}

/* 内容样式 */
.container {
  height: 100%;
}

.content-container {
  flex: 1;
  height: 100%;
  display: flex;
  overflow: hidden;
  padding-top: 10rpx;
}

.nav_left {
  width: 25%;
  height: 100%;
  background: #ffffff;
  overflow-y: scroll;
}

.nav_left .nav_left_items {
  line-height: 50rpx;
  color: #333;
  font-weight: bold;
  border-bottom: 0px solid #e6e6e6;
  font-size: 28rpx;
  position: relative;
  border-right: 0 solid #e6e6e6;
  padding: 25rpx 30rpx;
}

.nav_left .nav_left_items.active {
  background: #fff;
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
}

.nav_left .nav_left_items .before {
  display: none;
  position: absolute;
  top: 50%;
  margin-top: -12rpx;
  left: 10rpx;
  height: 24rpx;
  border-radius: 4rpx;
  width: 8rpx;
}

.nav_left .nav_left_items.active .before {
  display: block;
}

.nav_right {
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f6f6f6;
  box-sizing: border-box;
  padding: 0rpx 20rpx 0 20rpx;
}

.nav_right-content {
  height: 100%;
}

.nav-pai {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18rpx;
  background-color: #fff;
  margin: 14rpx 0rpx;
}

.nav-paili {
  flex: 1;
  text-align: center;
  color: #323232;
  font-size: 28rpx;
  font-weight: bold;
  position: relative;
  height: 80rpx;
  line-height: 80rpx;
}

.nav-paili .iconshangla {
  position: absolute;
  top: -4rpx;
  padding: 0 6rpx;
  font-size: 20rpx;
  color: #7d7d7d;
}

.nav-paili .icondaoxu {
  position: absolute;
  top: 8rpx;
  padding: 0 6rpx;
  font-size: 20rpx;
  color: #7d7d7d;
}

.classify-ul {
  width: 100%;
  height: 80rpx;
  padding: 0 10rpx;
}

.classify-li {
  flex-shrink: 0;
  display: flex;
  background: #f5f6f8;
  border-radius: 22rpx;
  color: #6c737f;
  font-size: 20rpx;
  text-align: center;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 28rpx;
  margin: 12rpx 10rpx 12rpx 0;
}

.classify-box {
  padding: 0 0 20rpx 0;
  width: 100%;
  height: calc(100% - 100rpx);
  overflow-y: scroll;
  border-top: 1px solid #f5f6f8;
}

.classify-box .nav_right_items {
  width: 100%;
  border-bottom: 1px #f4f4f4 solid;
  padding: 16rpx 0;
  box-sizing: border-box;
  position: relative;
}

.product-itemlist {
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}

.product-itemlist .item {
  width: 100%;
  display: inline-block;
  position: relative;
  margin-bottom: 12rpx;
  background: #fff;
  display: flex;
  padding: 14rpx 0;
  border-radius: 18rpx;
  border-bottom: 1px solid #f8f8f8;
}

.product-itemlist .product-pic {
  width: 35%;
  height: 0;
  overflow: hidden;
  background: #ffffff;
  padding-bottom: 35%;
  position: relative;
  border-radius: 4px;
}

.product-itemlist .product-pic .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.product-itemlist .product-pic .saleimg {
  position: absolute;
  width: 120rpx;
  height: auto;
  top: -6rpx;
  left: -6rpx;
}

.product-itemlist .product-info {
  width: 70%;
  padding: 0 10rpx 5rpx 20rpx;
  position: relative;
}

.product-itemlist .product-info .p1 {
  color: #323232;
  font-weight: bold;
  font-size: 28rpx;
  line-height: 36rpx;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 72rpx;
}

.product-itemlist .product-info .p2 {
  margin-top: 10rpx;
  height: 36rpx;
  line-height: 36rpx;
  overflow: hidden;
}

.product-itemlist .product-info .p2 .t1 {
  font-size: 32rpx;
}

.product-itemlist .product-info .p2 .t2 {
  font-size: 24rpx;
  color: #aaa;
}

.product-itemlist .product-info .p3 {
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 10rpx;
}

.product-itemlist .product-info .p3-1 {
  font-size: 24rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: right;
  color: #999;
}

.product-itemlist .product-info .p4 {
  width: auto;
  border-radius: 10rpx;
  position: absolute;
  bottom: 6rpx;
  right: 10rpx;
  text-align: center;
  height: 60rpx;
  line-height: 60rpx;
  color: #333;
  background: #fff;
  border: 1px solid #cdcdcd;
  text-align: center;
  padding: 0 20rpx;
}

.product-itemlist .product-info .p4 .icon_gouwuche {
  font-size: 32rpx;
  height: 56rpx;
  line-height: 56rpx;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  display: none;
  top: 20%;
  left: 20%;
}

.overlay .text {
  color: #fff;
  text-align: center;
  transform: translateY(100%);
}

.product-itemlist .soldout .product-pic .overlay {
  display: block;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.lianxi {
  color: #fff;
  border-radius: 50rpx 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-size: 22rpx;
  padding: 0 14rpx;
  display: inline-block;
  float: right;
}

.member {
  position: relative;
  border-radius: 8rpx;
  border: 1rpx solid #fd4a46;
  overflow: hidden;
  margin-top: 10rpx;
  box-sizing: content-box;
}

.member_lable {
  height: 100%;
  font-size: 22rpx;
  color: #fff;
  background: #fd4a46;
  padding: 0 10rpx;
}

.member_value {
  padding: 0 10rpx;
  font-size: 20rpx;
  color: #fd4a46;
}
.nav-img {
  width: 100%;
  height: 200rpx;
  margin-bottom: 20rpx;
}
.nav-img image {
  width: 100%;
  height: 200rpx;
}
</style>
